<template>
	<view class="body">
		<xk-header title="物业摘牌详情"></xk-header>
		<view class="util-bar">
			<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="'height:'+scrollViewHeight+'px;'">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">单号：{{info.apply_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办人:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.handle_user_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">申请人单位:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办人部门:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.handle_dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">联系人:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_user_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">电话:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_phone}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">邮编:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_email?info.apply_email:'--'}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">地址:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_address}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">申请日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_date}}</view></u-col>
				</u-row>

				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">状态:</view></u-col>
					<u-col span="7">
						<view v-if="info.hangnet_status==10" class="color-text-1">申请中</view>
						<view v-else-if="info.hangnet_status==20" class="color-text-2">审批中</view>
						<view v-else-if="info.hangnet_status==30" class="color-text-3">已审批</view>
						<view v-else-if="info.hangnet_status==40" class="color-text-4">审批不通过</view>
						<view v-else class="color-text-4">未知</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom:15px;border-bottom:1px solid #ccc;padding:0px 0 15px 0;">
					<u-col span="5"><view class="grey-text">摘牌物业清单:</view></u-col>
					<u-col span="7"><view @click="openWY(info.dets)" class="black-text" style="text-align: right;"><u-icon label="查看详细清单" labelColor="#0660FF" labelPos="left" name="arrow-right"></u-icon></view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">总建筑面积(m²):</view></u-col>
					<u-col span="7"><view class="black-text">{{info.building_area}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">月租金出价合计(元):</view></u-col>
					<u-col span="7"><view class="black-text">{{info.total_money}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">月租金出价合计(大写):</view></u-col>
					<u-col span="7"><view class="black-text">{{info.total_money_str}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.handle_date}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保证金(元):</view></u-col>
					<u-col span="7"><view class="black-text">{{info.caution_money}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">复核结果:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.review_results==3?'同意':'不同意'}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">保证金(大写):</view></u-col>
					<u-col span="7"><view class="black-text">{{info.caution_money_str}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">备注:</view></u-col>
					<u-col span="7"><view class="black-text">{{info.apply_remark}}</view></u-col>
				</u-row>


			</view>
		    </scroll-view>
		</view>
		<u-loading-page loading-mode="spinner" :loading="loadingText" loadingText="数据加载中" fontSize="16"></u-loading-page>
		<view class="common-bottom-view">
			<view class="common-btn" @click="back">返回</view>
		</view>
		<view class="common-zw"></view>
		<u-popup
		:show="showWY"
		:round="8"
		closeable
		@close="showWY=false"
		customStyle="height:60%"
		>
			<view class="wy-title">摘牌物业清单</view>
			<scroll-view scroll-y="true" class="scroll-Y">
			<view class="wybox" v-for="(wyItem, wyIndex) of wyList" :key="wyIndex">
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">物业编号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.property_code}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">楼栋:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.building}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">楼层:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.storey}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">房间号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.room_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">物业类型:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.property_type_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">物业地址:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.property_address}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">租赁用途:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.property_use}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">建筑面积(m²/间):</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.floor_area}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">招租定位:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.leasing_positioning?leasing_positioning:'--'}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">物业配置:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.property_deploy}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">出价月租金(元):</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.rent_money}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">成交月租金(元):</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.clinch_money}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">月租金底价(元/月/间):</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.pricing_rent_price}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">状态:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{wyItem.operational_status==15?'已挂网':'未知'}}</view></u-col>
				</u-row>
			</view>
			<view v-if="wyList.length===0" style="padding:15px;"><u-empty mode="data" :icon="(imgUrl+'/wx/empty_data_icon.png')"></u-empty></view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				scrollViewHeight:0,
				pi_delist_id:'',
				triggered:false,
				loadingText:false,
				info:[],
				showWY:false,
				wyList:[],
			}
		},
		onShow(){

		},
		onLoad(opts){
			console.log(opts)
			if(opts.pi_delist_id){
				this.pi_delist_id=opts.pi_delist_id
				this.queryListInfo(true)
			}
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height-95;
			});
		},
		onUnload(){
			uni.$off('refreshPatrolTask')
		},
		methods: {
			// modify(){
			// 	console.log("pi_delist_id:",this.pi_delist_id)
			// 	uni.navigateTo({
			// 		url:'/pages/estate-delisting/estate-delisting-apply?pi_delist_id='+this.pi_delist_id
			// 	})
			// },
			openWY(dets){
				this.showWY=true;
				this.wyList=dets;
			},
            back(){
            	uni.navigateBack()
            },
			pullDownRefresh(){
				if(this.triggered){
					return;
				}
				this.triggered = true;
				this.queryListInfo(true)
			},
			stopRefresh(){
				setTimeout(()=>{
					this.triggered = false;
					console.log('stop')
				}, 500)
			},

			async queryListInfo(flag) {
				this.loadingText=true;
				this.$api.get_delistData_getDelistDetail(this.pi_delist_id).then((res)=>{
					console.log(res)
					this.info=res.delistData_getDelist;
					this.loadingText=false;
				});
				this.stopRefresh();
			}
		}
	}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 10px 10px;
	margin:10px;
	border-radius:6px;
	font-size:28rpx;
}
.danhao-text{
	font-size:32rpx;
	font-weight:bold;
}
.grey-text{
	color:#999999;
}
.black-text{
	padding-left:5px;
}
.color-text-1{
	padding-left:5px;
	color:#59A0FF;
}
.color-text-2{
	padding-left:5px;
	color:#0660FF;
}
.color-text-3{
	padding-left:5px;
	color:#000000;
}
.color-text-4{
	padding-left:5px;
	color:#ff0000;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:10px;
	background-color:#f8f8f8;
	font-size:28rpx;
	border-radius:8px;
}
.wy-left-text{
	color:#999999;
}
.wy-right-text{
	color:#000000;
	margin-left:5px;
}
.scroll-Y{
	max-height:60vh;
}
</style>
